<template>
  <div class="function-config">
    <el-dialog
      :visible.sync="isShow"
      @close="triggerClose"
      :close-on-click-modal="false"
      @opened="triggerOpen"
      width="60%"
    >
      <el-form
        :model="purchaseContractItem"
        label-position="right"
        label-width="150px"
        class="page-edit-colllapse-form"
        :rules="rules"
        ref="purchaseContractItem">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('pur.demandCode')" prop="demandCode">
              <el-input v-model="purchaseContractItem.demandCode" :disabled="true">
                <el-button slot="append" icon="el-icon-search" @click="showProject"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('pur.contract_arrival_time')">
              <el-date-picker
                style="width:100%"
                v-model="purchaseContractItem.requiredArrivalTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('pur.plannedCompletionTime')">
              <el-date-picker
                v-model="purchaseContractItem.plannedCompletionTime"
                type="date"
                style="width:100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('pur.currency')" prop="currency">
              <el-select 
                style="width:100%"
                v-model="purchaseContractItem.currency"  
                placeholder="请选择">
                <el-option 
                  v-for="item in currencyList"
                  :key="item.dictText"
                  :label="item.dictText" 
                  :value="item.dictKey+''">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('pur.properAmount')" :rules="priceRules"  prop="estimateAmount">
              <el-input v-model="purchaseContractItem.estimateAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('purchaseContractItem')"
          :loading="submiting"
          class="loading-submiting"
        >保存</el-button>
      </div>
      <div slot="title" class="dialog-edit-head">
        <i>需求变更编辑</i>
      </div>
    </el-dialog>
    <PurBasDemandList
      ref="PurBasDemandList"
      :contractislogVisible="contractislogVisible"
      @addContract="addContract"
      @closeContractDislog="closeContractDislog"
    >
    </PurBasDemandList>
  </div>
</template>
<script>
import * as Constant from '@/utils/constant'
import { ALERT } from '@/utils/responseHandle'
import { mapState, mapActions } from 'vuex'
import PurBasDemandList from './PurBasDemandList'
import Submiting from '@/mixins/Submiting'
import api_pur from '@/api/api_pur'
import sys_manage from '@/api/sys_manage'
export default {
  /**
   *  文件列表
   */
  name: 'PurProcessDemChangeEdit',
  props: {
    fileListDislogVisible: {
      type: Boolean,
      default: false
    }
  },
  mixins: [Submiting],
  components: {PurBasDemandList},
  data () {
    return {
      isShow: this.fileListDislogVisible,
      purchaseContractItem: {
        id: null,
        demandCode: null,
        contractName: null,
        projectName: null,
        serviceName: null,
        specification: null,
        num: null,
        unit: null,
        contactUser: null,
        mobile: null,
        currency: null,
        estimateAmount: null,
        requiredArrivalTime: null,
        plannedCompletionTime: null
      },
      rules: {
        demandCode: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        currency: [
          { required: true, message: '必填项', trigger: 'change' }
        ]
      },
      priceRules:[{ required: true, message: '必填,且必须是数字',trigger: 'blur'}],
      currencyList: [],
      contractislogVisible: false
    }
  },
  created () {
    this.sysDictLoadByPaging()
  },
  methods: {
    triggerOpen () { // 打开dislog
    },
    triggerClose () { // 关闭dislog
    },
    submitForm (formName) {
      this.openSubmiting()
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          this.$emit('addFileList', this.purchaseContractItem)
          this.closeSubmiting()
        } else {
          this.closeSubmiting()
          return false
        }
      })
    },
    sysDictLoadByPaging () { // 获取系统应用分类
      sys_manage.sysDictLoadByPaging({dictGroupKey: 'run_currency'}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.currencyList = result.data
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    showProject () {
      this.contractislogVisible = true
    },
    closeContractDislog () {
      this.contractislogVisible = false
    },
    addContract (data) {
      this.purchaseContractItem.id = data.id
      this.purchaseContractItem= {
        ...data,
        currency: this.purchaseContractItem.currency,
        estimateAmount: this.purchaseContractItem.estimateAmount,
        requiredArrivalTime: this.purchaseContractItem.requiredArrivalTime,
        plannedCompletionTime: this.purchaseContractItem.plannedCompletionTime
      }
      this.closeContractDislog()
    }
  },
  watch: {
    fileListDislogVisible: {
      immediate: true,
      handler () {
        this.isShow = this.fileListDislogVisible
      }
    },
    isShow () {
      if (!this.isShow) {
        this.$emit('closeFileListDislog')
      } else {
      }
    }
  },
  computed: {
    ...mapState({
    })
  }
}
</script>
<style lang="scss">

</style>
